<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-home" @contextmenu.prevent="rightClick($event,'blank')">
      <el-form :inline="true">
        <el-form-item>
          <el-upload
              class="upload-demo"
              action="#"
              :show-file-list="false"
              :http-request="uploadChooseFile">
            <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <!--列表-->
      <ossList @rightClick="rightClick" :dataList="fileDataList" ref="ossList" @refreshDataList="initFileDataList()"></ossList>
    </div>
    <!--  右击菜单栏  -->
    <e-vue-contextmenu
        ref="ctxshow"
        id="contextStyle"
        class="right-menu"
        @ctx-show="rightMenuShow"
        @ctx-hide="rightMenuHide">
      <div class="context-menu">
      <ul class="list">
        <template v-for="(item,index) in rightMenuList" v-if="item.value!=='shareFile' || (item.value==='shareFile' && $store.state.user.superAdmin===1)">
        <li :key="index" @click="rightMenuItemClick(item.value)" :class="{'separate':item.value==='separate'}">
          {{ item.name }}
        </li>
        </template>
      </ul>
      </div>
    </e-vue-contextmenu>

    <!-- 弹窗, 上传文件 -->
    <upload v-if="uploadVisible" ref="upload" @refreshDataList="init"></upload>
    <!-- 弹窗, 文件信息 -->
    <fileInfo v-if="fileInfoVisible" ref="fileInfo"></fileInfo>
    <ossShareCreate v-if="shareFileVisible" ref="ossShareCreate"></ossShareCreate>
  </el-card>
</template>

<script>
import ossList from './oss/oss'
import mixinCloudOssModule from '@/mixins/cloud-oss-module'
export default {
  mixins: [mixinCloudOssModule],
  data () {
    return {
      // 右击菜单传参数据
      rightClickData: {},
      // 右击菜单
      rightMenuList: [],
      // 右击菜单字典
      rightMenuListDict: {
        // 右击文件
        file: [
          { name: '下载', value: 'downloadFile' }, { name: '分享', value: 'shareFile' }, { value: 'separate' }, { name: '重命名', value: 'reName' }, { name: '删除', value: 'delete' }, { value: 'separate' }, { name: '属性', value: 'info' }
        ],
        // 右击文件夹
        fileDir: [
          { name: '打开', value: 'openDir' }, { value: 'separate' }, { name: '重命名', value: 'reName' }, { name: '删除', value: 'delete' }, { value: 'separate' }, { name: '属性', value: 'info' }
        ],
        // 右击空白处
        blank: [
          { name: '刷新', value: 'reload' }, { value: 'separate' }, { name: '新建文件夹', value: 'createDir' }
        ]
      }
    }
  },
  activated () {
    this.init()
  },
  components: {
    ossList
  },
  methods: {
    // 初始化
    init () {
      this.initFileDataList()
    },
    // 初始化文件列表
    initFileDataList () {
      this.$nextTick(() => {
        this.getFileDataList(this.getWorkspacePath())
      })
    },
    // 右击
    rightClick (e, type, fileData) {
      this.rightClickData = { ...fileData }
      this.rightMenuList = this.rightMenuListDict[type]
      this.$refs.ctxshow.showMenu(e)
    },
    // 右击菜单显示
    rightMenuShow () {},
    // 右击菜单隐藏
    rightMenuHide () {
      this.rightClickData = {}
    }
  }
}
</script>
<style scoped>
.mod-home{
  min-height: calc(calc(100vh - 50px - 38px - 30px - 20px - 20px) - 2px);
  background: #fff;
}

/*右击菜单*/
.ctx-menu-container.right-menu{
  padding: 0;
  border: 0px;
}
.context-menu{
  position: absolute;
  font-size: 13px!important;
  color: #000!important;
  top: 0;
  left: 0;
  -moz-user-select: none;
  -o-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.context-menu .list{
  border: 1px solid #dde0e4;
  border-radius: 5px;
  box-shadow: 0 0 8px #ccc;
  margin: 0;

  min-height: 23px;
  padding: 2px 0;
  position: absolute;
  background-color: #FFF;
}

.context-menu .list li{
  display: block;
  cursor: default;
  width: 130px;
  height: 23px;
  line-height: 23px;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  padding: 0 27px 0 20px;
}
.context-menu .list li:hover{
  background-color: #4281F4;
  color: #FFF!important;
}

.context-menu .list .separate,.context-menu .list .separate:hover{
  padding: 0;
  margin: 5px 0;
  height: 1px;
  line-height: 0;
  font-size: 0!important;
  background-color: #e9e9e9;
  cursor: default;
}
</style>
